<div class="container-fluid vertex-aside " ng-controller="EdgeAsideController">
  <div class="row">
    <ul class="nav nav-pills nav-justified nav-pills-aside">
      <li ng-class="{active : 'properties' == active }"><a href="javascript:void(0)"
                                                           ng-click="active = 'properties'"
      ><i class="fa fa-bars"></i>Properties</a></li>
      <li ng-class="{active : 'settings' == active }"><a href="javascript:void(0)"
                                                         ng-click="active = 'settings'"><i
        class="fa fa-cog"></i>Settings</a>
      </li>
    </ul>
  </div>
  <div class="row">
    <!--<h5 class="text-center title-tab" ng-show="doc">-->
      <!--{{ active | capitalize}}-->
    <!--</h5>-->
    <h5 class="text-center title-tab" ng-hide="doc">
      No properties (lightweight edge)
    </h5>
  </div>
  <div class="row aside-form" ng-show="active == 'properties'">
    <div class="col-md-12">
      <form class="form-horizontal">
        <div class="form-group" ng-repeat="header in headers">
          <label for="inputDisplay" class="col-md-4 control-label">{{header}}</label>

          <div class="col-md-8">
            <p class="form-control-static">{{doc[header]}}</p>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="row aside-form-block" ng-show="active == 'settings'">
    <div class="col-md-12">

      <form class="form-horizontal">
        <div class="form-group">
          <label for="inputDisplay" class="col-md-6 control-label">Display</label>

          <div class="col-md-6">
            <select ng-model="config.display" id="inputDisplay"
                    ng-options="h for h in headers" class="form-control input-sm">

            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="inputDisplayExp" class="col-md-6 control-label">
            Display Template
            <i class="fa fa-question-circle pointer"
               data-trigger="hover" data-placement="bottom-left"
               data-animation="am-flip-x"
               data-container="body"
               data-template-url="views/hints/template-hint.html" bs-popover>
            </i>
            <!--</a>-->
          </label>

          <div class="col-md-6">

            <input type="text" id="inputDisplayExp" ng-model="config.displayExpression" class="form-control input-sm"
                   ng-change="setDirty()">
          </div>
        </div>
        <div class="form-group">
          <label for="inputRadius" class="col-md-6 control-label">Stroke Width</label>

          <div class="col-md-6">
            <input id="inputRadius" ng-model="config.strokeWidth" class="form-control input-sm">
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-6 control-label">Stroke</label>

          <div class="col-md-6">
            <spectrum-colorpicker
              ng-model="config.stroke"
              options="{preferredFormat: 'hex'}"></spectrum-colorpicker>
          </div>
        </div>

        <div class="form-group">
          <label class="col-md-6 control-label"></label>
          <div class="col-md-6 btn-group">
            <button href="javascript:void(0)" ng-disabled="!canSaveConfig" class="btn btn-primary btn-sm"
                    ng-click="save()"><i
              class="fa fa-save"> </i>
              Save
            </button>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>
